<template>
  <z-modal
    v-bind="modalOption"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="validatorRules">
        <a-row>
          <a-col :span="12" >
            <a-form-model-item label="名称" prop = "salonName" >
              <a-input v-model.trim="form.salonName" :disabled="disableSubmit"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="开始时间" prop="startTime">
              <a-date-picker v-model="form.startTime" placeholder="请选择开始时间" style="width: 100%" 
                            :disabled="disableSubmit"
                            format="YYYY-MM-DD" valueFormat="yyyy-MM-DD"  :disabled-date="disabledEndTime"
                            @change="(value,dateString) =>{ this.form = {...this.form,startTime: dateString}}"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="结束时间" prop="endTime">
              <a-date-picker v-model="form.endTime" placeholder="请选择结束时间" style="width: 100%" 
                          :disabled="disableSubmit "
                            format="YYYY-MM-DD" valueFormat="yyyy-MM-DD"  :disabled-date="disabledStartTime"
                            @change="(value,dateString) =>{ this.form,endTime=dateString}" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="主办单位" prop = "organizer" >
              <a-input   v-model.trim="form.organizer" :disabled="disableSubmit"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="预计人数" prop = "estimateNm" >
              <a-input-number style="width: 100%"   v-model.trim="form.estimateNm" :disabled="disableSubmit"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="内容" prop = "describe" >
              <a-input   v-model.trim="form.describe" :disabled="disableSubmit"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="地址" prop = "address" >
              <a-input   v-model.trim="form.address" :disabled="disableSubmit"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="联系人" prop = "contactsPr" >
              <a-input   v-model.trim="form.contactsPr" :disabled="disableSubmit"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="联系方式" prop = "contactsInfo" >
              <a-input   v-model.trim="form.contactsInfo" :disabled="disableSubmit" :maxLength = "11"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </z-modal>
</template>

<script>
import ModalFormMixin from '@/mixins/ModalFormMixin'
import { CURY_TYPE } from '@/store/mutation-types'

export default {
    name: 'EmployeeManageModal',
    mixins: [ModalFormMixin],
    data() {
      return {
        validatorRules: {
        salonName: [
            { required: true, message: '请填写名称!' }
          ],
          startTime: [
            { required: true, message: '请选择开始时间!' }
          ],
          endTime: [
            { required: true, message: '请选择结束时间!' },
          ],
          organizer: [
            { required: true, message: '请填写主办单位!' }
          ],
          estimateNm: [
            { required: true, message: '请填写预计人数!' }
          ],
          describe: [
            { required: true, message: '请填写内容!' }
          ],
          address: [
            { required: true, message: '请填写地址!' }
          ],
          contactsPr:[
            {required: true, message: '请填写联系人!'}
          ],
          contactsInfo: [
            { required: true, message: '请填写联系方式!'},
          ]
        },
        url: {
          add: '/salon/info/v1/add',
          edit: '/salon/info/v1/edit'
        },
        disabledEndTime: (startValue) => {
          if (!startValue || !this.form.endTime) {
            return false
          }
          return startValue.valueOf() > new Date(this.form.endTime.replace(/-/g, '/')).getTime()
        },
        disabledStartTime: (endValue) => {
          if (!endValue || !this.form.startTime) {
            return false
          }
          return new Date(this.form.startTime.replace(/-/g, '/')).getTime() >= endValue.valueOf()
        }
      }
    },
    methods: {
      async handleOk() {
        try {
          // 校验主表单及子表
          console.log(this.form)
          await this.getAllValidate()
          if (this.form.startTime) {
             this.form.startTime =  this.form.startTime + " 00:00:00"
          }
          if (this.form.endTime) {
             this.form.endTime =  this.form.endTime + " 23:59:59"
          }
          this.confirmLoading = true
          // 提交前后事件处理 需要阻止继续执行 需要返回异步Promise new Promise((resolve, reject)=>{ reject({message:'我是错误信息'}) }) 提示信息可以放到reject处理，也可自己处理
          if (typeof this.submitBefore === 'function') await this.submitBefore()
          const formData = this.classifyIntoFormData ? this.classifyIntoFormData() : Object.assign(this.form, { crudType: this.editType === 'add' ? CURY_TYPE.SAVE : CURY_TYPE.UPDATE })
          const res = await this.request(formData)
          this.confirmLoading = false
          if (res.success) {
            // 提交后事件处理
            typeof this.submitAfter === 'function' ? await this.submitAfter(res) : this.defaultCallback(res)
          }
        } catch (error) {
          this.confirmLoading = false
          if (error && typeof error === 'object') {
            const { message, key } = error
            message ? this.$message.warning(message) : ''
            key ? this.activeKey = key : '' // 校验失败后，切换至校验失败tab
          }
          console.error(error)
        }
      }
    }}
</script>

